<template>
  <view class="box" @click="external">
    <view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'">
      <image @click.stop="fanhui" class="image1" src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png" />
			<!-- #ifndef MP-WEIXIN -->
				新房
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<text @click="fanhui" style="position: absolute;left:50%;transform: translateX(-50%);">新房</text>
			<!-- #endif -->
      <image @click.stop="sousuo" class="image2" src="https://pic.bangbangtongcheng.com/static/sousuo.png"
        mode="widthFix" />
    </view>
    <view class="tit_list" :style="'height: calc(100vh - 88rpx - ' + statusBarHeight1 + 'px);'">
      <view class="tit">
        <view :class="userType == '' ? 'xuan view' : 'view'" @click.stop="xuanzhong('')">全部</view>
        <view :class="userType == '2' ? 'xuan view' : 'view'" @click.stop="xuanzhong(2)">个人</view>
        <view :class="userType == '1' ? 'xuan view' : 'view'" @click.stop="xuanzhong(1)">经纪人</view>
        <view class="sai" @click.stop="showModal" data-target="DrawerModalR">
          筛选
          <span>▼</span>
        </view>
      </view>
      <scroll-view class="scroll-view" :scroll-y="modalName == ''|| modalName == null" @scrolltolower="down" :scroll-top="scrollTop1" @scroll="scroll"
        refresher-background="#f5f5f5">
        <view class="li" v-for="(item, index) in Recommend" :key="index" @click.stop="details(item.id)">
          <image mode="aspectFit" :src="item.display_diagram?item.display_diagram:imgUrl + item.house_image" />
          <view class="li_1">
            <view class="tits">{{ item.title }}</view>
            <view class="neirong_1">
            	<view class="neir_css">{{ item.region }}</view>
            	<view class="neir_css">{{ item.cell_name || ''}}</view>
            </view>
            <view class="neirong_1">
            	<view class="neir_css">{{ item.FLOOR?item.FLOOR.split('|')[0]+"层/共"+item.FLOOR.split('|')[1]+"层" :''}}</view>
            	<view class="neir_css">{{item.house_type || ''}}</view>
            </view>
            <view class="neirong_1">
              <view class="price neir_css" v-if="item.transaction_type == 2">{{ item.price }}万</view>
              <view class="price neir_css" v-if="item.transaction_type == 1 && item.price <= 10000">{{ item.price }}元</view>
              <view class="price neir_css" v-if="item.transaction_type == 1 && item.price > 10000">{{ item.price/10000 }}万元</view>
              <view class="neir_css" style>{{ item.AREA || item.area }}㎡</view>
            </view>
          </view>
        </view>
        <view v-if="Recommend.length == 0" class="none">
          <image src="https://pic.bangbangtongcheng.com/static/none.png" mode="widthFix" />
          <view>没有更多数据了</view>
        </view>
        <view class="down" v-show="Recommend.length != 0 && !downStatus">没有更多了</view>
      </scroll-view>
    </view>
    <view class="cu-modal drawer-modal justify-end" :class="modalName == 'DrawerModalR' ? 'show' : ''">
		<scroll-view scroll-y="true" class="pop-scroll" >
		<view class="tittit" :style="[
		  {
		    top: 'calc(' + CustomBar1 + 'px' + ' + 36px )',
		   
		  },
		]">
		  <view @click="hideModal()">×</view>筛选
		</view>
      <view class="cu-dialog basis-lg" @tap.stop :style="[
          {
            top: 'calc(' + CustomBar1 + 'px' + ' + 36px )',
            height: 'calc(100vh - ' + CustomBar1 + 'px - 36px)',
          },
        ]">
        <view class="cu-list menu text-left">
          <view style="height: 80rpx;">
            <!-- <view @click.stop="hideModal()">×</view>筛选 -->
          </view>
          <view class="leibie">
            类别
            <span style="color: #999999">（请选择类别）</span>
            <view class="list">
              <view @click.stop="type1Click(index)" :class="item.active ? 'li xuan' : 'li'"
                v-for="(item, index) in type1" :key="index">{{ item.valueName }}</view>
            </view>
          </view>
			    <view class="quyu">
			      户型
			      <span style="color: #999999">（请选择户型）</span>
			      <view class="list">
			        <view @click.stop="type3Click(index)" class="li" :class="item.active ? 'li xuan' : 'li'"
			          v-for="(item, index) in type3" :key="index">{{ item.valueName }}</view>
			      </view>
			    </view>
          <view class="quyu">
            区域
            <span style="color: #999999">（请选择区域）</span>
            <view class="list">
              <view @click.stop="type7Click(index)" class="li" :class="item.active ? 'li xuan' : 'li'"
                v-for="(item, index) in type7" :key="index">{{ item.valueName }}</view>
            </view>
          </view>
          <view class="jiage">
            价格
            <span style="color: #999999">（请选择价格）</span>
            <view class="list">
              <view @click="type8Click(index)" class="li" :class="item.active ? 'li xuan' : 'li'"
                v-for="(item, index) in type8" :key="index">{{ item.valueName }}</view>
            </view>
          </view>
          <view class="mianji">
            面积
            <span style="color: #999999">（请选择面积）</span>
            <view class="list">
              <view @click.stop="type9Click(index)" class="li" :class="item.active ? 'li xuan' : 'li'"
                v-for="(item, index) in type9" :key="index">{{ item.valueName }}</view>
            </view>
          </view>
          <view class="loucen">
            楼层
            <span style="color: #999999">（请选择楼层）</span>
            <view class="list">
              <view @click.stop="type10Click(index)" class="li" :class="item.active ? 'li xuan' : 'li'"
                v-for="(item, index) in type10" :key="index">{{ item.valueName }}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="di">
        <view class="div l" @click.stop="cz">重置</view>
        <view class="div r" @click.stop="sx">确定</view>
      </view>
	  </scroll-view>
    </view>
    <view v-if="scrollTop>0" class="hui" @click.stop="totop">
      <image src="https://pic.bangbangtongcheng.com/static/top.png" />返回顶部
    </view>
	<uniBall></uniBall>
    <!-- <view-tabbar :selected="0"></view-tabbar> -->
  </view>
</template>

<script>
  import {
    mapGetters
  } from "vuex";
  //#ifdef H5
  import wxshare from "../../utils/index.js";
  //#endif
  import Tabbar from "@/components/tabbar.vue";
  export default {
    data() {
      return {
        xuan: 1,
        modalName: "",
        leibieLiat: [1],
        pageSize: 10,
        pageNo: 1,
        Recommend: [],
        imgUrl: this.$imgSrc,
        showType: false,
        orderSort: "1",
        scrollTop: "0",
        scrollTop1: "0",
        trigger: false,
        downStatus: true,
        upStatus: true,
        userType: "",
        type1: [],
        type3: [],
        type7: [],
        type8: [],
        type9: [],
        type10: [{
            active: false,
            valueName: "低层",
            value: "1"
          },
          {
            active: false,
            valueName: "中层",
            value: "2"
          },
          {
            active: false,
            valueName: "高层",
            value: "3"
          }
        ],
        houseType: "",
        type: "",
        region: "",
        price: "",
        area: "",
        floor: "",
        CustomBar1: "",
		    user:uni.getStorageSync("Pduser")
      };
    },
    components: {
      "view-tabbar": Tabbar
    },
    computed: {
      ...mapGetters(["statusBarHeight1", "userinfo"])
    },

    onLoad(options) {
      console.log(options);
      this.getType();
      this.getRecommend();
      this.CustomBar1 = this.CustomBar;
      /* #ifdef H5 */
      this.jinzhi();
      /* #endif */
    },
    filters: {
      nums(val) {
        return val.toFixed(2);
      }
    },
    onPageScroll: function (Object) {
      // console.log(Object.scrollTop); //实时获取到滚动的值
      this.scrollTop = Object.scrollTop;
    },
    async onPullDownRefresh() {
      this.Recommend = [];
      this.pageNo = 1;
      this.downStatus = true;
      if (this.upStatus) {
        this.trigger = true;
        await this.getRecommend();
      }
    },
    methods: {
      xuanzhong(num) {
        // this.xuan = num;
        this.userType = num;
        this.Recommend = [];
        this.pageNo = 1;
        this.downStatus = true;
        // this.getRecommend();
        this.cz();
      },
      jinzhi() {
        let _this = this;
        let param = window.location.href.split("#")[0];
        uni.request({
          method: "post",
          data: {
            url: param
          },
          header: {
            "content-type": "application/x-www-form-urlencoded"
          },
          url: "https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do",
          success(re) {
            _this.jinzhifx(re.data);
          }
        });
      },
      jinzhifx(data) {
        wxshare.config({
          debug: false, //是否打开调试
          appId: data.appId, // 公众号的唯一标识
          timestamp: data.timestamp, // 生成签名的时间戳
          nonceStr: data.nonce, // ，生成签名的随机串
          signature: data.signature, // 签名
          jsApiList: ["hideMenuItems"]
        });
        // 禁止分享
        wxshare.hideMenuItems({
          // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
          menuList: [
            "menuItem:share:appMessage",
            "menuItem:share:timeline",
            "menuItem:share:timeline",
            "menuItem:share:qq",
            "menuItem:favorite",
            "menuItem:share:QZone",
            "menuItem:openWithSafari"
          ]
        });
      },
      scroll(e) {
        this.oldScrollTop = e.detail.scrollTop;
        this.scrollTop = e.detail.scrollTop;
      },
      cz() {
        this.type1.forEach(el => {
          el.active = false;
        });
        this.type7.forEach(el => {
          el.active = false;
        });
        this.type8.forEach(el => {
          el.active = false;
        });
        this.type9.forEach(el => {
          el.active = false;
        });
        this.type10.forEach(el => {
          el.active = false;
        });
        this.type3.forEach(el => {
          el.active = false;
        });
        this.houseType = "";
        this.type = "";
        this.region = "";
        this.price = "";
        this.area = "";
        this.floor = "";
        this.Recommend = [];
        this.pageNo = 1;
        this.downStatus = true;
        this.getRecommend();
      },
      totop() {
        this.scrollTop1 = this.oldScrollTop;
        this.$nextTick(() => {
          this.scrollTop1 = 0;
        });
      },
      sx() {
        let that = this;
        this.houseType = "";
        this.type = "";
        this.region = "";
        this.price = "";
        this.area = "";
        this.floor = "";
        this.type1.forEach(el => {
          if (el.active == true) {
            that.type = el.valueNum;
          }
        });
        this.type7.forEach(el => {
          if (el.active == true) {
            that.region = el.valueName;
          }
        });
        this.type3.forEach(el => {
          if (el.active == true) {
            that.houseType = el.valueName;
          }
        });
        this.type8.forEach(el => {
          if (el.active == true) {
            that.price = el.valueName;
          }
        });
        this.type9.forEach(el => {
          if (el.active == true) {
            that.area = el.valueName;
          }
        });
        this.type10.forEach(el => {
          if (el.active == true) {
            that.floor = el.value;
          }
        });
        this.Recommend = [];
        this.pageNo = 1;
        this.downStatus = true;
        this.modalName = null;
        this.getRecommend();
      },
      type1Click(index) {
        let that = this;
        this.type1.forEach((el, index1) => {
          if (index == index1) {
            that.$set(that.type1[index1], "active", !el.active);
          } else {
            that.type1[index1].active = false;
          }
        });
      },
      type7Click(index) {
        let that = this;
        this.type7.forEach((el, index1) => {
          if (index == index1) {
            that.$set(that.type7[index1], "active", !el.active);
          } else {
            that.type7[index1].active = false;
          }
        });
      },
      type3Click(index) {
        let that = this;
        this.type3.forEach((el, index1) => {
          if (index == index1) {
            that.$set(that.type3[index1], "active", !el.active);
          } else {
            that.type3[index1].active = false;
          }
        });
      },
      type8Click(index) {
        let that = this;
        this.type8.forEach((el, index1) => {
          if (index == index1) {
            that.$set(that.type8[index1], "active", !el.active);
          } else {
            that.type8[index1].active = false;
          }
        });
      },
      type9Click(index) {
        let that = this;
        this.type9.forEach((el, index1) => {
          if (index == index1) {
            that.$set(that.type9[index1], "active", !el.active);
          } else {
            that.type9[index1].active = false;
          }
        });
      },
      type10Click(index) {
        let that = this;
        this.type10.forEach((el, index1) => {
          if (index == index1) {
            that.$set(that.type10[index1], "active", !el.active);
          } else {
            that.type10[index1].active = false;
          }
        });
      },
      getType() {
        let that = this;
        this.$myRequest
          .get("/mob/home/getDictionaries", {
            pageNo: 1,
            pageSize: 10,
            type: "9,7,8,1,3"
          })
          .then(res => {
            console.log(res);
            res.list.forEach(el => {
              el.active = false;
              if (el.type == 1) {
                that.type1.push(el);
              } else if (el.type == 7) {
                that.type7.push(el);
              } else if (el.type == 8) {
                that.type8.push(el);
              } else if (el.type == 3) {
                that.type3.push(el);
              } else if (el.type == 9) {
                that.type9.push(el);
              } else if (el.type == 10) {
                that.type10.push(el);
              }
            });
            // this.list = this.list.concat(res.list);
          });
      },
      sousuo() {
        // if (!this.userinfo.phone) {
        //   uni.showToast({
        //     title: "请登录",
        //     icon: "none",
        //     mask: true
        //   });
        //   return;
        // }
        uni.navigateTo({
          url: "/pages_houses/housing/oldHouseSearch?searchlogType=1&type=1"
        });
      },
      details(id) {
        uni.navigateTo({
          url: "/pages_houses/housing/used/houseDetails?id=" + id
        });
      },
      external() {
        this.modalName = null;
      },
      showModal(e) {
        this.modalName = e.currentTarget.dataset.target;
      },
      guan() {
        this.zbc = false;
      },
      down() {
        if (this.downStatus) {
          this.pageNo++;
          this.getRecommend();
        }
      },
      async up() {
        this.Recommend = [];
        this.pageNo = 1;
        this.downStatus = true;
        if (this.upStatus) {
          this.trigger = true;
          await this.getRecommend();
        }
      },
      getRecommend() {
        this.upStatus = false;
        this.$myRequest
          .get("/mob/home/getHouseInfo", {
            pageSize: this.pageSize,
            pageNo: this.pageNo,
            orderSort: this.orderSort,
            newOld: 1,
            upStatus: 1,
            examineStatus: 2,
            userType: this.userType,
            type: this.type,
            region: this.region,
            price: this.price,
            area: this.area,
            floor: this.floor,
            transactionType: 2,
            houseType: this.houseType,
            isLz: "0"
          })
          .then(res => {
            if (!res.list.length) {
              this.downStatus = false;
            }
            this.upStatus = true;
            this.trigger = false;
            res.list.forEach(el => {
              if (el.house_image) {
                el.house_image = el.house_image.split("|")[0];
              }
			  
			  if (el.hasOwnProperty("FLOOR")) {
			    if (el.FLOOR.indexOf('|')!=-1) {
			       el.FLOOR=el.FLOOR.split('|')[0]+'层/共'+el.FLOOR.split('|')[1]+'层'
			    }else {
			      el.FLOOR = "";
			    }
			  }
            });
            this.Recommend = this.Recommend.concat(res.list);
            uni.stopPullDownRefresh();
            // this.userInfo = res.userInfo;
            // uni.setStorageSync("Pduser", res.userInfo);
          });
      },
      hideModal(e) {
        this.modalName = null;
      },
      fanhui() {
        uni.navigateBack({
          delta: 1
        });
      }
    }
  };
</script>

<style lang="less" scoped>
	.tittit{
		position: fixed;top:0;right:0;    background-color: #f8f8f8;z-index: 9999;
		max-width: 100%;
		    width: 600rpx;
			transition-duration:0.3s;
			transform: translateX(100%);
			
			text-align: center;
			line-height: 80rpx;
			font-size: 30rpx;
			border-bottom: 2rpx solid #cccccc;
			
			view {
			  position: absolute;
			  top: 0rpx;
			  left: 20rpx;
			  color: #999999;
			  font-size: 54rpx;
			  font-weight: 100;
			}
	} 
	.show .tittit{
		transform: translateX(0%);
	}
  .cu-list {
		padding-bottom: calc(98rpx + env(safe-area-inset-bottom) / 2);

    .tit {
      position: relative;
      width: 100%;
      height: 80rpx;
      text-align: center;
      line-height: 80rpx;
      font-size: 30rpx;
      border-bottom: 2rpx solid #cccccc;

      view {
        position: absolute;
        top: 0rpx;
        left: 20rpx;
        color: #999999;
        font-size: 54rpx;
        font-weight: 100;
      }
    }

    .leibie {
      margin-top: 40rpx;
      font-size: 28rpx;
      margin-left: 40rpx;

      .list {
        width: 100%;
        margin-top: 24rpx;

        .li {
          display: inline-block;
          text-align: center;
          width: 154rpx;
          height: 60rpx;
          line-height: 60rpx;
          background: #f2f2f2;
          border-radius: 30rpx;
          margin-right: 24rpx;
          margin-bottom: 24rpx;
        }

        .xuan {
          background: #64b6a8;
          color: #fff;
        }
      }
    }

    .quyu {
      margin-top: 40rpx;
      font-size: 28rpx;
      margin-left: 40rpx;

      .list {
        width: 100%;
        margin-top: 24rpx;

        .li {
          display: inline-block;
          text-align: center;
          width: 154rpx;
          height: 60rpx;
          line-height: 60rpx;
          background: #f2f2f2;
          border-radius: 30rpx;
          margin-right: 24rpx;
          margin-bottom: 24rpx;
        }

        .xuan {
          background: #64b6a8;
          color: #fff;
        }
      }
    }

    .jiage {
      margin-top: 40rpx;
      font-size: 28rpx;
      margin-left: 40rpx;

      .list {
        width: 100%;
        margin-top: 24rpx;

        .li {
          display: inline-block;
          text-align: center;
          width: 214rpx;
          height: 60rpx;
          line-height: 60rpx;
          background: #f2f2f2;
          border-radius: 30rpx;
          margin-right: 24rpx;
          margin-bottom: 24rpx;
        }

        .xuan {
          background: #64b6a8;
          color: #fff;
        }
      }
    }

    .mianji {
      margin-top: 40rpx;
      font-size: 28rpx;
      margin-left: 40rpx;

      .list {
        width: 100%;
        margin-top: 24rpx;

        .li {
          display: inline-block;
          text-align: center;
          width: 214rpx;
          height: 60rpx;
          line-height: 60rpx;
          background: #f2f2f2;
          border-radius: 30rpx;
          margin-right: 24rpx;
          margin-bottom: 24rpx;
        }

        .xuan {
          background: #64b6a8;
          color: #fff;
        }
      }
    }

    .loucen {
      margin-top: 40rpx;
      font-size: 28rpx;
      margin-left: 40rpx;

      .list {
        width: 100%;
        margin-top: 24rpx;

        .li {
          display: inline-block;
          text-align: center;
          width: 154rpx;
          height: 60rpx;
          line-height: 60rpx;
          background: #f2f2f2;
          border-radius: 30rpx;
          margin-right: 24rpx;
          margin-bottom: 24rpx;
        }

        .xuan {
          background: #64b6a8;
          color: #fff;
        }
      }
    }
  }

  .zbc {
    position: fixed;
    width: 100%;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 99999;
  }

  .box {
    width: 100%;
    background-color: #fff;
  }

  .tou {
    position: relative;
    width: 100%;
    // height: 88rpx;
    text-align: center;
    line-height: 88rpx;
    font-size: 36rpx;
    color: #fff;
    background-color: #64b6a8;
		/* #ifdef MP-WEIXIN */
		text-align: left;
		display: flex;
		align-items: center;
		/* #endif */
    .image1 {
      position: absolute;
      width: 32rpx;
      height: 32rpx;
      // top: 116rpx;
      left: 30rpx;
    }

    .image2 {
      position: absolute;
      width: 56rpx;
      height: 56rpx;
	  bottom: 16rpx!important;
      // top: 116rpx;
      right: 30rpx;
			/* #ifdef MP-WEIXIN */
			position: initial;
			margin-left: auto;
			margin-right: 200rpx;
			/* #endif */
    }
  }

  .tit_list {
    padding: 32rpx 30rpx calc(env(safe-area-inset-bottom) / 2);

    .tit {
      position: relative;
      margin-bottom: 32rpx;

      .view {
        display: inline-block;
        width: 120rpx;
        height: 58rpx;
        border-radius: 8rpx;
        text-align: center;
        line-height: 58rpx;
        color: #333;
        background-color: #f2f2f2;
        margin-right: 24rpx;
        font-size: 32rpx;
      }

      .xuan {
        background-color: #64b6a8;
        color: #fff;
      }

      .sai {
        position: absolute;
        font-size: 32rpx;
        top: 4rpx;
        right: 30rpx;

        span {
          margin-left: 8rpx;
          font-size: 20rpx;
        }
      }
    }

    .li {
      display: flex;
      align-items: center;
      padding-bottom: 30rpx;
      margin-bottom: 30rpx;
      border-bottom: 2rpx solid #e0e0e0;

      image {
        width: 300rpx;
        height: 200rpx;
		border-radius: 20rpx;
      }

      .li_1 {
        margin-left: 24rpx;
        height: 200rpx;

        .tits {
          width: 366rpx;
          font-size: 32rpx;
          font-weight: 600;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2; //想要的行数
          -webkit-box-orient: vertical;
        }

        .neirong_1{
        	width: 366rpx;
        	font-size: 24rpx;
        	color: #666666;
        	display: flex;
        	align-items: center;
        	.price{
        		color: red;
        		font-size: 30rpx;
        		font-weight: 600;
        	}
        	.neir_css{
        		flex: 1;
        		overflow: hidden;
        		text-overflow: ellipsis;
        		display: -webkit-box;
        		-webkit-line-clamp: 1; //想要的行数
        		-webkit-box-orient: vertical;
        	}
        	.neir_css:nth-child(2n){
        		margin-left: 10rpx;
        	}
        	.neir_css:nth-child(2n-1){
        		margin-right: 10rpx;
        	}
        }
      }
    }

    .li:last-child {
      border-bottom: 0rpx solid #e0e0e0;
    }
  }

  .hui {
    position: fixed;
    right: 30rpx;
    bottom: 154rpx;
    display: flex;
    align-items: center;
    padding: 10rpx 20rpx;
    background-color: #fff;
    border-radius: 34rpx;
    font-size: 26rpx;
    box-shadow: 0px 0px 36rpx rgba(0, 0, 0, 0.16);
    
    image {
    	width: 46rpx;
    	height: 46rpx;
    	margin-right: 18rpx;
    }
  }

  .cu-dialog {
    max-width: 100%;
    width: 600rpx;
  }

  .basis-lg {
    flex-basis: 600rpx;
    overflow: auto;
  }
	.pop-scroll {
		position: relative;
	}
	.di {
		position: absolute;
		transform: translateY(0rpx);
		width: 100%;
		bottom: 0;
    left: 75rpx;

    .div {
	  padding-bottom: calc(env(safe-area-inset-bottom) / 2);
	  height: calc(env(safe-area-inset-bottom) / 2 + 98rpx);
      display: inline-block;
      width: 300rpx;
      text-align: center;
      line-height: 98rpx;
      font-size: 30rpx;
    }

    .l {
      background: #e0e0e0;
    }

    .r {
      background: #64b6a8;
      color: #fff;
    }
  }

  .scroll-view {
		height: calc(100% - 58rpx - 24rpx);
  }

  .down {
    height: 60rpx;
    line-height: 60rpx;
    // border-top: 2rpx solid #d0d0d0;
    text-align: center;
  }

  .none {
    text-align: center;

    image {
      width: 430rpx;
      margin-bottom: 16rpx;
    }

    view {
      height: 40rpx;
      line-height: 40rpx;
      color: #666;
    }
  }
</style>